<template>
	<view class="container">
		<view class="container_top">
			<!-- 图标 水费 -->
			<view class="c_account">
				<image style="width: 40rpx; height: 54rpx" src="/static/assets/water_26.png"></image>
				<view style="flex-grow: 1; font-size: 30rpx; margin-left: 20rpx">水费</view>
				<view style="color: #999; font-size: 28rpx">户主：{{ balance_detail.owner_name }}</view>
			</view>

			<!-- 户名 户号 余额 -->
			<view style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 20rpx; margin-left: 20rpx; margin-right: 20rpx" @tap="toChargeByItem">
				<view style="color: #999; font-size: 28rpx">户号：{{ account_num }}</view>
				<view style="color: #00be6e; font-size: 28rpx">余额：{{ balance }}元</view>
			</view>

			<!-- 输入金额 -->
			<view style="color: #000; font-size: 28rpx; margin-top: 30rpx; margin-left: 20rpx">输入金额</view>

			<!-- 人民币符号 输入金额 -->
			<view style="display: flex; flex-direction: row; margin-left: 20rpx; margin-right: 20rpx; margin-top: 30rpx; align-items: center">
				<view style="font-size: 44rpx; color: #000">￥</view>
				<input style="font-size: 30rpx; flex-grow: 1; margin-left: 30rpx" placeholder="请输入缴费金额" :value="charge_num" maxlength="20" type="digit" @input="onInput" />
			</view>

			<!-- 输入金额的下划线 -->
			<view style="background-color: #e5e5e5; margin-left: 20rpx; margin-right: 20rpx; height: 1rpx; margin-top: 10rpx"></view>

			<!-- 50 100 200 金额 -->
			<view style="display: flex; flex-direction: row; margin-top: 40rpx; margin-left: 40rpx; margin-right: 40rpx; justify-content: space-evenly; margin-bottom: 20rpx">
				<view :class="(money_state == 0 ? 'money_btn_sel' : 'money_btn') + ' '" @tap="on50Click">50</view>
				<view :class="(money_state == 1 ? 'money_btn_sel' : 'money_btn') + ' '" @tap="on100Click">100</view>
				<view :class="money_state == 2 ? 'money_btn_sel' : 'money_btn'" @tap="on200Click">200</view>
			</view>
		</view>

		<view class="btn_0" @tap="onToCharge">立即缴费</view>
	</view>
</template>

<script>
	const app = getApp(); // 获取应用实例
	const util = require('../../../utils/util');
	import { getInit, getWBalance } from '../../../utils/http/api';
	import { openWxPay } from '../../../utils/pay/pay';
	export default {
		data() {
			return {
				// 传过来的缴费户号
				account_num: '',
				// 缴费金额
				charge_num: '',
				// 50 100 200 选中状态 0 选中50 1 选中 100 2 选中200
				money_state: 99,
				// 水费余额详情
				balance_detail: {
					owner_name: ''
				},
				// 水费余额
				balance: 0
			};
		}, // 生命周期函数--监听页面加载
		onLoad: function(options) {
			// 获取初始化支付信息
			this.reqInit()
			// 设置传过来的参数
			this.setData({ charge_num: options.charge_num, account_num: options.account_num })
			// 请求户号余额等信息
			this.reqBalance()
		},
		methods: {
			// 点击50
			on50Click: function(e) {
				let new_m_state = 0;
				let new_c_num = 50;
				if (this.money_state == 0) {
					new_m_state = 99
					new_c_num = ''
				}
				this.setData({ money_state: new_m_state, charge_num: new_c_num })
			},

			// 点击100
			on100Click: function(e) {
				let new_m_state = 1
				let new_c_num = 100
				if (this.money_state == 1) {
					new_m_state = 99;
					new_c_num = ''
				}
				this.setData({ money_state: new_m_state, charge_num: new_c_num })
			},

			// 点击200
			on200Click: function(e) {
				let new_m_state = 2
				let new_c_num = 200
				if (this.money_state == 2) {
					new_m_state = 99
					new_c_num = ''
				}
				this.setData({ money_state: new_m_state, charge_num: new_c_num })
			},

			// 监听金额输入框
			onInput: function(e) {
				// 监听输入的缴费金额，赋值给记录变量
				this.setData({ charge_num: e.detail.value })
			},

			// 去缴费
			onToCharge: function(e) {
				if (util.isNull(this.charge_num)) {
					uni.showToast({ title: '请输入缴费金额', icon: 'none' })
					return
				}
				openWxPay(1, this.charge_num, this.account_num, '')
			},

			// 请求水费余额
			async reqBalance() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getWBalance({ water: this.account_num, token: app.globalData.gl.token })
				if (code == '1') {
					this.setData({ balance_detail: data.data, balance: data.data.money })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 初始化支付信息等
			async reqInit() {
				let { code, msg, data } = await getInit({})
				if (code == '1') {
					app.globalData.gl.wx_appsecret = data.app_secret
				}
			},

			toChargeByItem() {

			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}

	.container_top {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
	}

	.c_account {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.money_btn {
		height: 60rpx;
		line-height: 60rpx;
		color: #000;
		border-width: 2rpx;
		border-color: #e5e5e5;
		border-style: solid;
		border-radius: 10rpx;
		margin-left: 20rpx;
		text-align: center;
		flex-grow: 1;
	}

	.money_btn_sel {
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		background-color: #25b785;
		border-width: 2rpx;
		border-color: #25b785;
		border-style: solid;
		border-radius: 10rpx;
		margin-left: 20rpx;
		text-align: center;
		flex-grow: 1;
	}

	.btn_0 {
		background-color: #25b785;
		margin-top: 120rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: white;
		font-size: 30rpx;
	}
</style>